<template>
  <div class="gs">
    <div class="gs-a">
      <div class="gs-a-aa">返回</div>
      <div class="gs-a-aaa">工商信息</div>
      <div class="gs-a-aaaa"></div>
    </div>
    <div class="gs-b">
      <div class="gs-b-aa" v-for="(item, index) in list" :key="index">
        {{ item.name }}
      </div>
    </div>
    <div class="gs-c">
      <div class="gs-c-a">登记信息</div>
      <div class="gs-c-aa">
        <div class="gs-c-aaa">名称</div>
        <div class="gs-c-aaaa">苏州XX科技创新有限公司</div>
      </div>
      <div class="gs-c-aa">
        <div class="gs-c-aaa">法定代表人</div>
        <div class="gs-c-aaaa">张三</div>
      </div>
      <div class="gs-d">
        <div class="gs-d-a" v-for="(item, index) in roster" :key="index">
          <div class="gs-d-aa">{{ item.title }}</div>
          <div class="gs-d-aaa">{{ item.uname }}</div>
        </div>
      </div>
      <div class="gs-c-aa gs-cc">
        <div class="gs-c-aaa">国际行标</div>
        <div class="gs-c-aaaa">纺织、服装及家庭用品批发</div>
      </div>
    </div>
    <div class="gs-dd">
      <div class="gs-d">
        <div class="gs-d-a">
          <div class="gs-d-aa">统一社会信用代码</div>
          <div class="gs-d-aaa">9132039448858432XX</div>
        </div>
        <div class="gs-d-a">
          <div class="gs-d-aa">组织机构代码</div>
          <div class="gs-d-aaa">MA23J10B-X</div>
        </div>
      </div>
      <div class="gs-d">
        <div class="gs-d-a">
          <div class="gs-d-aa">工商注册号</div>
          <div class="gs-d-aaa">-</div>
        </div>
        <div class="gs-d-a">
          <div class="gs-d-aa">纳税人识别号</div>
          <div class="gs-d-aaa">9132039448858432XX</div>
        </div>
      </div>
      <div class="gs-d">
        <div class="gs-d-a">
          <div class="gs-d-aa">进出口企业代码</div>
          <div class="gs-d-aaa">-</div>
        </div>
        <div class="gs-d-a">
          <div class="gs-d-aa">纳税人资质</div>
          <div class="gs-d-aaa">-</div>
        </div>
      </div>
    </div>
    <div class="gs-e">
      <div class="gs-e-a">经营范围</div>
      <div class="gs-e-aa">
        预包装食品、散装食品的零售。从事儿童产品包括婴儿推车、自行车、电动自行车、三轮车、学步车、电瓶车、汽车座、童床及床上用品、童装、童鞋、用具（奶具、洁具、便具及相关产品）、玩具、学习用品、护理用品、儿童家具和家庭用品、儿童保护产品，以及孕妇服饰和用品、医疗器械、小家电类产品、化妆品的销售、进出口业务及佣金代理（拍卖除外）；提供相关技术服务与咨询。以下仅限分支机构经营：出版物的批发、零售。（不涉及国营贸易管理商品，涉及配额、许可证管理商品的，按国家有关规定办理申请）。（依法须经批准的项目，经相关部门批准后方可开展经营活动）
      </div>
    </div>
    <div class="gs-f">
      <div class="gs-f-a">股东信息</div>
      <div class="gs-f-aa">
        <div class="gs-f-aaa">周</div>
        <div class="gs-f-aaaa">
          <div class="gs-f-b">周峰</div>
          <div class="gs-f-bb">境内中国公民</div>
        </div>
      </div>
      <div class="gs-f-bbb">
        <div class="gs-f-bbbb">
          <div class="gs-g">出资额</div>
          <div class="gs-g-a">3,000万美元</div>
        </div>
        <div class="gs-f-bbbb">
          <div class="gs-g">出资比例</div>
          <div class="gs-g-a">75.00%</div>
        </div>
      </div>
    </div>
    <div class="gs-gg"></div>
    <div class="gs-f-aa">
        <div class="gs-f-aaa">南华期货</div>
        <div class="gs-f-aaaa">
          <div class="gs-f-b">南华期货股份有限公司苏州营业部</div>
          <div class="gs-f-bb">香港企业</div>
        </div>
      </div>
      <div class="gs-f-bbb">
        <div class="gs-f-bbbb">
          <div class="gs-g">出资额</div>
          <div class="gs-g-a">3,000万美元</div>
        </div>
        <div class="gs-f-bbbb">
          <div class="gs-g">出资比例</div>
          <div class="gs-g-a">75.00%</div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      roster: [
        {
          title: "登记状态",
          uname: "存续（在业、开业、在册）",
        },
        {
          title: "成立日期",
          uname: "2002-01-11",
        },
        {
          title: "注册资本",
          uname: "2050万元人民币",
        },
        {
          title: "实缴资本",
          uname: "10000万元人民币",
        },
        {
          title: "参保人数",
          uname: "52",
        },
        {
          title: "人员规模",
          uname: "50-99人",
        },
      ],
      list: [
        {
          name: "登记信息",
        },
        {
          name: "股东信息 1",
        },
        {
          name: "主要人员 2",
        },
        {
          name: "变更记录 1",
        },
      ],
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {},
};
</script>

<style scoped lang="scss">
.gs {
  overflow-y: auto;
  .gs-a {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f3f3f3;
    height: 92px;
    .gs-a-aa {
      width: 34px;
      margin: 61px 0 0 17px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 17px;
      color: #000000;
    }
    .gs-a-aaa {
      margin-top: 61px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 17px;
      color: #000000;
    }
    .gs-a-aaaa {
      width: 34px;
      margin: 61px 17px 0 0;
    }
  }
  .gs-b {
    height: 55px;
    border-bottom: 9px solid #f3f3f3;
    display: flex;
    align-items: center;
  }
  .gs-b-aa {
    flex: 1;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #f3f3f3;
    border-radius: 2px;
    margin-left: 10px;
  }
  .gs-b-aa:last-of-type {
    margin-right: 10px;
  }
  .gs-c {
    height: 389px;
    border-bottom: 9px solid #f3f3f3;
    .gs-c-a {
      font-family: Alibaba PuHuiTi;
      font-weight: 600;
      font-size: 15px;
      color: #2c2c2c;
      margin: 0 12px 0 12px;
      border-bottom: 1px solid #f3f3f3;
      height: 40px;
      line-height: 40px;
    }
    .gs-c-aa {
      margin: 0 12px 0 12px;
      border-bottom: 1px solid #f3f3f3;
      overflow: hidden;
      height: 50px;

      .gs-c-aaa {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 15px;
        color: #989898;
      }
      .gs-c-aaaa {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 14px;
        color: #2c2c2c;
      }
    }
    .gs-cc {
      margin-top: 18px;
      border-bottom: none;
    }
    .gs-d {
      display: flex;
      flex-wrap: wrap;

      .gs-d-a {
        border-right: 1px solid #f3f3f3;
        margin-top: 11px;
        width: 50%;
        .gs-d-aa {
          margin: 0 0 0 11px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 15px;
          color: #989898;
        }
        .gs-d-aaa {
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 14px;
          color: #2c2c2c;
          margin-left: 11px;
        }
      }
    }
  }
  .gs-dd {
    border-bottom: 9px solid #f3f3f3;
    height: 185px;
    .gs-d {
      display: flex;
      flex-wrap: wrap;

      .gs-d-a {
        border-right: 1px solid #f3f3f3;
        margin-top: 11px;
        width: 50%;
        .gs-d-aa {
          margin: 0 0 0 11px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 15px;
          color: #989898;
        }
        .gs-d-aaa {
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 14px;
          color: #2c2c2c;
          margin-left: 11px;
        }
      }
    }
  }
  .gs-e {
    border-bottom: 9px solid #f3f3f3;
    height: 320px;
    .gs-e-a {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 15px;
      color: #989898;
      padding: 11px 0 0 11px;
    }
    .gs-e-aa {
      padding: 0 12px 0 12px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 15px;
      color: #2c2c2c;
    }
  }
  .gs-f {
    .gs-f-a {
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 15px;
      color: #2c2c2c;
      margin: 12px 0 0 12px;
    }
    .gs-f-aa {
      margin: 10px 0 0 11px;
      display: flex;
      .gs-f-aaa {
        width: 32px;
        height: 32px;
        background: #d99d9a;
        border-radius: 4px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 32px;
        text-align: center;
      }
      .gs-f-aaaa {
        margin-left: 9px;
        .gs-f-b {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 17px;
          color: #000000;
          line-height: 17px;
        }
        .gs-f-bb {
          width: 77px;
          height: 20px;
          background: #e4efff;
          border-radius: 2px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 10px;
          color: #3282e4;
          line-height: 20px;
          text-align: center;
          margin-top: 3px;
        }
      }
    }
    .gs-f-bbb {
      display: flex;
      flex-wrap: wrap;

      .gs-f-bbbb {
        border-right: 1px solid #f3f3f3;
        margin-top: 11px;
        width: 50%;
        .gs-g {
          margin: 0 0 0 11px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 15px;
          color: #989898;
        }
        .gs-g-a {
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 14px;
          color: #2c2c2c;
          margin-left: 11px;
        }
      }
    }
  }
  .gs-gg {
    border: 1px solid #f3f3f3;
    margin: 0 12px 0 12px;
  }
  .gs-f-aa {
      margin: 10px 0 0 11px;
      display: flex;
      .gs-f-aaa {
        width: 32px;
        height: 32px;
        background: #8BCBB8;
        border-radius: 4px;
        font-family: Alibaba PuHuiTi;
font-weight: 500;
font-size: 11px;
color: #FFFFFF;
line-height: 16px;
        text-align: center;
      }
      .gs-f-aaaa {
        margin-left: 9px;
        .gs-f-b {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 17px;
          color: #000000;
          line-height: 17px;
        }
        .gs-f-bb {
          color: #3F9F71;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 10px;
          line-height: 20px;
          text-align: center;
          margin-top: 3px;
          width: 58px;
height: 20px;
background: #E3F2ED;
border-radius: 2px;
        }
      }
    }
    .gs-f-bbb {
      display: flex;
      flex-wrap: wrap;

      .gs-f-bbbb {
        border-right: 1px solid #f3f3f3;
        margin-top: 11px;
        width: 50%;
        .gs-g {
          margin: 0 0 0 11px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 15px;
          color: #989898;
        }
        .gs-g-a {
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 14px;
          color: #2c2c2c;
          margin-left: 11px;
        }
      }
    }
}
</style>
